<template>
	  <el-form ref="form" :model="content" label-width="15px">
	  <el-form-item >
		  <img class="cropper-img" :src="imgUrl" alt="">
	    <el-button type="primary" @click="openCropperImg">裁剪</el-button>
	  </el-form-item>
	</el-form>
</template>

<script>
	export default {
	  name: 'UICropperimg',
	  props: {
	    value: {
	      type: String,
	      required: true
	    },
		comid:{
			type:String,
			required:true
		}
	  },
	  data () {
	    return {
			content:{}
	    }
	  },
	  computed:{
		imgUrl(){
			return this.value
		}  
	  },
	methods:{
		openCropperImg(){
			const store=this.$store
			// 设置需要裁剪的图片路径
			this.$store.commit('CROPPER_IMGURL',this.imgUrl)
			this.$store.commit('SET_TESTIMG', {
				status: false,
				cropperImg:true,
				callback: (result) => {
					this.$store.commit('EDIT_COMP', {
						type: 'props',
						compid: this.comid,
						value: {
							src: result
						}
					})
				}
			})
		}
	}
	}
</script>

<style>
	
	.cropper-img{
		width: 200px;
		height: 200px;
		margin-bottom:5px;
	}
</style>
